리액트 네이티브 [React Native] 시작하기 React Native 개발환경 React Native CLI 준비 : Xcode(iOS) 또는 Android Studio(windows) Expo CLI의 많은 이슈로 React Native CLI을 사용할 예정 1. Chocolatey 설치 Chocolatey 설치 확인 - Node.js 설치 및 확인 - jdk8 설치 및 확인 (무조건 jdk8 이상으로 설치하기) windows 사용자로... 리액트 네이티브react nativereact native 리액트 네이티브 기초지식 - 1) 컴포넌트 1) 컴포넌트(Component) --> 정해진 엘리먼트들을 사용하여 만든 화면의 일부분 2) 상태(State) --> 컴포넌트에서 데이터를 유지하고 관리하기 위한 방법(== 사용할 데이터) 3) 속성(Props) --> 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식(== 데이터 전달) --> style을 보면 (JavaScript언어로 쓰여진) 딕셔너리들로 이루어진 styles리... 안드로이드 앱 개발JSX리액트 네이티브JSX 앱 프로젝트 - 1 프로젝트 주제 다이어트나 운동을 보조하기 위한 자기 관리 앱 기획안 [기획안 개요] 1) 프로젝트 이름/간단 설명 다이어터 식단 관리, 운동 방법 및 유명인들의 다이어트 방법 소개, 캘린더를 활용한 운동 스케쥴짜기 등등 --> 운동과 관련된 자기관리를 보조하는 앱 2) 프로젝트 생김새(레이아웃) --> 이미지의 'copy of 운동법' 부분은 운동일정에 관련된 부분입니다. 3) 개발해야 하는... 과제안드로이드 앱 개발리액트 네이티브과제 [ReactNative] 네비게이터(Navigate) 네비게이션 앱 내의 페이지 구성 및 페이지 이동을 적용해주는 이 라이브러리는 다양한 기능들을 가지고 있다. 앱 하단에 탭 버튼을 두고 해당 버튼을 누르면 연결되어 있는 페이지로 바로바로 이동할 수 있게 해주는 기능도 가지고 있다. 스택네비게이션 우리가 페이지처럼 만든 컴포넌트를, 정말 페이지처럼 사용할 수 있게끔 페이지로 컴포넌트를 감싸 페이지로 만들어준다. 이렇게 만든 여러 페이지들을 책갈... reactnative리액트 네이티브reactnative JSX 기본 문법 리액트 네이티브라는 개발도구 위에 Expo를 올려서 손쉽게 코딩하는 형태 --> 기반은 리액트 네이티브이므로 모든 태그는 리액트 네이티브(도구상자)로 부터 불러옴 JSX 문법 --> <> 형태로 된 태그문법로 이루어짐 [Expo로 앱 생성시 초기 화면] --> App() 함수는 View태그를 반환(반환된 View로 화면을 그려주는 것) -->화면에 반환된 View 태그의 내용이 나타남 -->... JSXJavaScript리액트 네이티브안드로이드 앱 개발JSX {}표현식, 조건문 예시 ) 코드의 일부분 let todayWeather = 10 + 17; let todayCondition = "흐림" return ( return 구문 안에서는 {슬래시 + 방식으로 주석 <Text>오늘의 날씨: {자바스크립트처럼 + 연산}</Text> 사용 <Text>나 <ScrollView> 등의 태그에 style을 입히기 위해서도 {} 사용 --> styles.container등 st... JSXJavaScript리액트 네이티브안드로이드 앱 개발JSX 리액트 네이티브 - Expo 여러 앱기능 - 앱에서 외부링크 열기 앱에서 외부링크를 열기 위한 준비 expo에서 제공하는 도구 설치 expo install expo-linking 설치한 도구에서 불러오기 --> expo-linking안의 도구를 모두 가져온는데 그 이름을 Linking이라고 명명짓겠다는 의미 도구를 이용하여 함수 만들기 Linking.openURL(" ) 만든 함수를 활용... JSX리액트 네이티브안드로이드 앱 개발JSX
[React Native] 시작하기 React Native 개발환경 React Native CLI 준비 : Xcode(iOS) 또는 Android Studio(windows) Expo CLI의 많은 이슈로 React Native CLI을 사용할 예정 1. Chocolatey 설치 Chocolatey 설치 확인 - Node.js 설치 및 확인 - jdk8 설치 및 확인 (무조건 jdk8 이상으로 설치하기) windows 사용자로... 리액트 네이티브react nativereact native 리액트 네이티브 기초지식 - 1) 컴포넌트 1) 컴포넌트(Component) --> 정해진 엘리먼트들을 사용하여 만든 화면의 일부분 2) 상태(State) --> 컴포넌트에서 데이터를 유지하고 관리하기 위한 방법(== 사용할 데이터) 3) 속성(Props) --> 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식(== 데이터 전달) --> style을 보면 (JavaScript언어로 쓰여진) 딕셔너리들로 이루어진 styles리... 안드로이드 앱 개발JSX리액트 네이티브JSX 앱 프로젝트 - 1 프로젝트 주제 다이어트나 운동을 보조하기 위한 자기 관리 앱 기획안 [기획안 개요] 1) 프로젝트 이름/간단 설명 다이어터 식단 관리, 운동 방법 및 유명인들의 다이어트 방법 소개, 캘린더를 활용한 운동 스케쥴짜기 등등 --> 운동과 관련된 자기관리를 보조하는 앱 2) 프로젝트 생김새(레이아웃) --> 이미지의 'copy of 운동법' 부분은 운동일정에 관련된 부분입니다. 3) 개발해야 하는... 과제안드로이드 앱 개발리액트 네이티브과제 [ReactNative] 네비게이터(Navigate) 네비게이션 앱 내의 페이지 구성 및 페이지 이동을 적용해주는 이 라이브러리는 다양한 기능들을 가지고 있다. 앱 하단에 탭 버튼을 두고 해당 버튼을 누르면 연결되어 있는 페이지로 바로바로 이동할 수 있게 해주는 기능도 가지고 있다. 스택네비게이션 우리가 페이지처럼 만든 컴포넌트를, 정말 페이지처럼 사용할 수 있게끔 페이지로 컴포넌트를 감싸 페이지로 만들어준다. 이렇게 만든 여러 페이지들을 책갈... reactnative리액트 네이티브reactnative JSX 기본 문법 리액트 네이티브라는 개발도구 위에 Expo를 올려서 손쉽게 코딩하는 형태 --> 기반은 리액트 네이티브이므로 모든 태그는 리액트 네이티브(도구상자)로 부터 불러옴 JSX 문법 --> <> 형태로 된 태그문법로 이루어짐 [Expo로 앱 생성시 초기 화면] --> App() 함수는 View태그를 반환(반환된 View로 화면을 그려주는 것) -->화면에 반환된 View 태그의 내용이 나타남 -->... JSXJavaScript리액트 네이티브안드로이드 앱 개발JSX {}표현식, 조건문 예시 ) 코드의 일부분 let todayWeather = 10 + 17; let todayCondition = "흐림" return ( return 구문 안에서는 {슬래시 + 방식으로 주석 <Text>오늘의 날씨: {자바스크립트처럼 + 연산}</Text> 사용 <Text>나 <ScrollView> 등의 태그에 style을 입히기 위해서도 {} 사용 --> styles.container등 st... JSXJavaScript리액트 네이티브안드로이드 앱 개발JSX 리액트 네이티브 - Expo 여러 앱기능 - 앱에서 외부링크 열기 앱에서 외부링크를 열기 위한 준비 expo에서 제공하는 도구 설치 expo install expo-linking 설치한 도구에서 불러오기 --> expo-linking안의 도구를 모두 가져온는데 그 이름을 Linking이라고 명명짓겠다는 의미 도구를 이용하여 함수 만들기 Linking.openURL(" ) 만든 함수를 활용... JSX리액트 네이티브안드로이드 앱 개발JSX